<template>
  <div>
    <!-- 1 -->
    <div class="cardBox" v-if="showType == 1">
      <slot name="label">
        <svg-icon iconClass="info"></svg-icon>
      </slot>
      <slot name="text"></slot>
    </div>
    <!-- 2 -->
    <div class="scholar-h-index" v-else-if="showType == 2">
      <div class="title">H指数</div>
      <div class="content">{{ index }}</div>
    </div>
    <!-- 3 -->
    <div v-else-if="showType == 3" class="card panel">
      <div class="card-icon">
        <img
          src=""
          style="width: 39px; height: 38px"
        />
      </div>
      <div class="card-content" style="margin-left: 4px">
        <div class="card-title">
          学术发文总量
          <svg
            viewBox="0 0 1024 1024"
            class="el-tooltip icon-info item"
            aria-describedby="el-tooltip-5311"
            tabindex="0"
          >
            <path
              d="M512 96c-229.76 0-416 186.24-416 416s186.24 416 416 416 416-186.24 416-416-186.24-416-416-416zM577.248 665.056c-31.392 47.136-63.328 83.456-117.056 83.456-36.672-5.984-51.744-32.256-43.808-59.04l69.12-228.928c1.696-5.6-1.12-11.584-6.24-13.408-5.088-1.792-15.072 4.832-23.712 14.304l-41.792 50.272c-1.12-8.448-0.128-22.4-0.128-28.032 31.392-47.136 82.976-84.32 117.952-84.32 33.248 3.392 48.992 29.984 43.2 59.2l-69.6 230.048c-0.928 5.184 1.824 10.464 6.528 12.128 5.12 1.792 15.872-4.832 24.544-14.304l41.76-50.24c1.12 8.448-0.768 23.232-0.768 28.864zM567.936 366.048c-26.432 0-47.872-19.264-47.872-47.616s21.44-47.584 47.872-47.584 47.872 19.264 47.872 47.584c0 28.384-21.44 47.616-47.872 47.616z"
              fill="#707070"
            ></path>
          </svg>
        </div>
        <div class="card-number" style="color: rgb(83, 205, 165)">{{ index }}</div>
      </div>
    </div>
    <!-- 4 -->
    <div class="card panel" v-else-if="showType == 4">
      <div class="card-icon">
        <img
          src=""
          style="width: 39px; height: 39px"
        />
      </div>
      <div class="card-content" style="margin-left: 13px">
        <div class="card-title">核心发文量</div>
        <div class="card-number" style="color: rgb(131, 139, 236)">{{index}}</div>
      </div>
    </div>
    <!-- 5 -->
    <div class="card panel" v-else-if="showType == 5">
      <div class="card-icon">
        <img
          src=""
          alt=""
          style="width: 37px; height: 29px"
        />
      </div>
      <div class="card-content" style="margin-left: 10px">
        <div class="card-title">
          总被引频次
          <!---->
        </div>
        <div class="card-number" style="color: rgb(150, 219, 11)">{{index}}</div>
      </div>
      <!---->
    </div>
    <!-- 6 -->
    <div class="card panel" v-else-if="showType == 6">
      <div class="card-icon">
        <img
          src=""
          alt=""
          style="width: 37px; height: 38px"
        />
      </div>
      <div class="card-content" style="margin-left: 5px">
        <div class="card-title">
          篇均被引频次
          <!---->
        </div>
        <div class="card-number" style="color: rgb(252, 168, 70)">{{index}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showType: {
      type: Number,
      default: 1, //1表示小黑标 2为 H 指数 3 为学术发文总量 4 为核心发文总量 5 为总被引频次 6 为篇均被引频次
    },
    index:{
      type:String,
      default: '0'
    }
  },
};
</script>

<style scoped>
.cardBox {
  width: 80x;
  height: 40px;
  opacity: 1;
  border-radius: 8px;
  background: rgba(89, 89, 116, 0.25);

  border: 1px solid rgba(104, 107, 134, 0.14);
  font-size: 16px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  padding: 5px 5px;
  color: white;
}

.scholar-h-index {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 73px;
  background: hsla(0, 0%, 100%, 0);
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
}
.scholar-h-index .title {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background: #5996cc;
}
.scholar-h-index .content {
  background: #fff;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  font-weight: 700;
  color: #4982cb;
}

.card {
  display: inline-block;
  min-width: 210px;
  padding: 0px 20px;
  height: 80px;
  background-size: cover;
  position: relative;
}
.panel {
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 0 5px 0 hsla(0, 0%, 68.2%, 0.3);
  box-shadow: 0 0 5px 0 hsla(0, 0%, 68.2%, 0.3);
}
.card-icon {
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  display: inline-block;
  margin-left: 2%;
  width: 64px;
  height: 74px;
  background: url()
    no-repeat;
  background-size: cover;
  margin-top: 3px;
  vertical-align: top;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.card-content {
  position: relative;
  display: inline-block;
  padding-top: 16px;
  font-size: 0;
  vertical-align: top;
  text-align: center;
  z-index: 99;
}
.card-title {
  font-size: 12px;
  margin-left: 4px;
  color: #666;
}
.card-title .icon-info {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: text-top;
}
.card-number {
  font-size: 21px;
  font-weight: 700;
  color: #53cda5;
}
.width120{
    width: 120px;
}
</style>